<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <link rel="icon" href="../../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/slick.css" />
  <link rel="stylesheet" href="../../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../../assets/source/css/custom/product-details.css" />
<link rel="stylesheet" href="../css/index.css">

<style>
  .el-dialog__body{
    padding: 0 20px;
  }
	.i1{
		width:100px;
		height:100px;
		margin-left: 10px;
	}
	.pic{
	margin-left: 10px;
	width:75px;
	}
	.pic1{
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
	}
	.picshow{
	float: left;
	}
	.pic2{
	float: left;
	}
	.e1{
	clear: both;
	}
  
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
  .select1{
    width: 100px;
    height: 40px;
    border: 1px solid #c4b8b8; /* 灰色边框 */  
  border-radius: 4px; /* 可选：添加圆角边框 */
  font-size: 16px;
  }
  .o1{
    width: 100px;
    height: 20px;
  }
</style>

</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
        	<el-form-item label="商品编号">
                <el-input v-model="product.pid" placeholder="编号"></el-input>
              </el-form-item>
            
            <!-- 类别输入提示框 -->
              <el-form-item label="商品名称">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="product.pname"
			      :fetch-suggestions="querySearch1"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
              </el-form-item>
            
            
            <el-form-item label="商品数量">
                <el-input v-model="product.inventory" placeholder="数量"></el-input>
              </el-form-item>
              <el-form-item label="商品进价">
                <el-input v-model="product.intprice" placeholder="进价"></el-input>
              </el-form-item>
              <el-form-item label="商品售价">
                <el-input v-model="product.outprice" placeholder="售价"></el-input>
              </el-form-item>
              <el-form-item label="商品品牌">
                <el-input v-model="product.brand" placeholder="品牌"></el-input>
              </el-form-item>
              
              <!-- 类别输入提示框 -->
              <el-form-item label="商品类别">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="product.tname"
			      :fetch-suggestions="querySearch"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
              </el-form-item>
              
              <el-form-item label="商品重量">
                <el-input v-model="product.weight" placeholder="重量"></el-input>
              </el-form-item>
              <el-form-item label="商品描述">
                <el-input v-model="product.des" placeholder="描述"></el-input>
              </el-form-item>
    		<el-form-item label="商品状态">
              <el-select v-model="product.status" placeholder="状态">
              	<el-option label="所有" value="-1"></el-option>
                <el-option label="下架" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="bygoods(1)">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
          :data="members"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          label="商品编号"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.pid }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="商品图片"
          align="center"
          >
          <template slot-scope="scope">
          <el-popover
		    placement="top"
		    title="商品描述"
		    width="200"
		    trigger="hover"
		    >
		    <ul class="tips-content">
		    	{{scope.row.des == "" ? "暂未描述商品" : scope.row.des}}
		    </ul>
            <span slot="reference"><img class="i1" :src=`../../../upload/${scope.row.pic}`></span>
          </el-popover>
          </template>
          </el-table-column>
          <el-table-column
          label="商品名称"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.pname }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="商品数量"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.inventory }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="商品品牌"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.brand }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="商品类别"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.tname }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="商品进价"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.intprice }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="商品售价"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.outprice }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="商品重量"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.weight }}{{ scope.row.weightL }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="商品评论"
          align="center"
          >
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="look(scope.$index, scope.row)">查看</el-button>
          </template>
          </el-table-column>
          
          <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 1"
	          size="mini"
	          type="danger"
	          class="ban"
	          @click="banL(scope.$index, scope.row)">下架</el-button>
	          <el-button v-if="scope.row.status == 0"
	          size="mini"
	          type="danger"
	          @click="banL(scope.$index, scope.row)">上架</el-button>
          </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage4"
		      :page-sizes="[10,20,30,40,50]"
		      :page-size="pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
          </el-pagination>
        </div>
        
        <!--添加按钮-->
        <br/>
        <el-button type="success" plain @click="open">添加商品</el-button>
    </el-card>
    
    <!--添加商品弹窗-->
  <el-dialog title="添加商品信息" :visible.sync="dialogFormVisible" top="0">
    <el-form>
      <el-form-item label="商品名称">
        <el-input style="width: 400px;" v-model="adddata.pname" placeholder="商品名称"></el-input>
      </el-form-item>
      <div class="pic1"><div style="align-content: center" class="pic2">头像:<input type="file" class="pic" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg"></div>
      <div class="picshow"><img class="i1" :src="picshow" v-if="picshow != ''">
      <el-empty :image-size="70" v-if="picshow == ''" class="i1"></el-empty></div></div> 
      <el-form-item label="进货价格" class="e1">
        <el-input style="width: 400px;" v-model="adddata.intprice" placeholder="进货价格"></el-input>
      </el-form-item>
      <el-form-item label="出售价格">
        <el-input style="width: 400px;" v-model="adddata.outprice" placeholder="出售价格"></el-input>
      </el-form-item>
      <el-form-item label="商品数量">
        <el-input style="width: 400px;" v-model="adddata.inventory" placeholder="数量"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-input style="width: 400px;" v-model="adddata.brand" placeholder="品牌"></el-input>
      </el-form-item>
      <el-form-item label="商品重量">
        <el-input style="width: 200px;" v-model="adddata.weight" placeholder="重量"></el-input>
        <select class="select1" style="text-align: center;" v-model="adddata.weightL">
          <option value="g" class="o1">g</option>
          <option value="kg" class="o1">kg</option>
        </select>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input style="width: 400px;" v-model="adddata.des" placeholder="描述"></el-input>
      </el-form-item>
  
      <el-form-item label="商品类别">
        <el-select v-model="tname" placeholder="类别">
          <el-option v-for="item in type" :value="item.tname" :key="item.tid">{{item.tname}}</el-option>
        </el-select>
      </el-form-item>
  
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="offone">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
  
  <!-- 编辑信息弹框 -->
  <el-dialog title="修改商品信息" :visible.sync="updatetk" top="0">
    <el-form>
      <el-form-item label="商品名称">
        <el-input style="width: 400px;" v-model="update.pname" placeholder="商品名称"></el-input>
      </el-form-item>
		<div class="pic1"><div style="align-content: center" class="pic2">头像:<input type="file" class="pic" name="pic" @change="File($event)" accept="image/gif, image/jpeg"></div>
      <div class="picshow"><img class="i1" :src="picshow"></div></div>      
      <el-form-item label="进货价格">
        <el-input style="width: 400px;" v-model="update.intprice" placeholder="进货价格"></el-input>
      </el-form-item>
      <el-form-item label="出售价格">
        <el-input style="width: 400px;" v-model="update.outprice" placeholder="出售价格"></el-input>
      </el-form-item>
      <el-form-item label="商品数量">
        <el-input style="width: 400px;" v-model="update.inventory" placeholder="数量"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-input style="width: 400px;" v-model="update.brand" placeholder="品牌"></el-input>
      </el-form-item>
      <el-form-item label="商品重量">
        <el-input style="width: 200px;" v-model="update.weight" placeholder="重量"></el-input>
        <select class="select1" style="text-align: center;" v-model="update.weightL">
          <option value="g" class="o1">g</option>
          <option value="kg" class="o1">kg</option>
        </select>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input style="width: 400px;" v-model="update.des" placeholder="描述"></el-input>
      </el-form-item>
  
      <el-form-item label="商品类别">
        <el-select v-model="tname">
          <el-option v-for="item in type" :value="item.tname" :key="item.tid">{{item.tname}}</el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="offtwo">取 消</el-button>
      <el-button type="primary" @click="updateproduct">确 定</el-button>
    </div>
  </el-dialog>
  
  <!-- 评论显示弹窗 -->
   <el-dialog
        title="商品评论"
        :visible.sync="pvalL"
        top="0">
        <div>
        <br/>
        <span>
        商品总评分:
        <el-rate
		  v-model="value"
		  disabled
		  show-score
		  text-color="#ff9900"
		  score-template="{value}">
		</el-rate>
        </span>
        </div>
        <div v-if="pval.length < 1"><br/>暂无评价</div>
		<div class="tab-pane active" id="review" v-if="pval.length > 0">
       <div class="pro-tab-review">
        <ul class="review-list">
         <li class="review-item" v-for="item in pval">
          <div class="reviewer-img"> 
           <a href="#"><img :src=`../../../upload/${item.pic}` alt="reviewer-2" /></a>
          </div>
          <div class="reviewer-descrip">
           <div class="reviewer-meta"> 
            <a href="javascript:void(0);">{{item.uname}}</a>
            <p>{{item.pvaltime}}</p>
           </div>
           <ul class="reviewer-rating">
             <!-- 使用计算属性或内联方法来控制星星的数量 -->  
          <li v-for="n in parseInt(item.starnum)">  
            <i class="fas fa-star" :class="{ 'active': n <= parseInt(item.starnum) }"></i>  
          </li>  
          <!-- 如果starnum小于5，则添加剩余的未激活星星 -->  
          <li v-for="n in 5 - parseInt(item.starnum)">  
            <i class="fas fa-star"></i>  
          </li>  
           </ul>
           <div class="reviewer-quote">
            <p>{{item.valtext}}</p>
           </div>
          </div></li>
        </ul>
       </div>
      </div>
	<div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="pvalL = false">确 定</el-button>
       </div>
 	</el-dialog>

</div>

<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      product: {
    	  pid: '',
    	  pname: '',
          tname: '',
          inventory: '',
          brand: '',
          intprice: '',
          outprice: '',
          weight: '',
          des:'',
          status:''
      },
      members: [],
      dialogFormVisible: false,
      //添加商品信息
	adddata: {
        pname: '',
        pic: '',
        inventory: '',
        brand: '',
        intprice: '',
        outprice: '',
        weight: '',
        weightL:'g',//单位
        des:''
      },
      //修改商品信息
      update: {
          pname: '',
          pic: '',
          inventory: '',
          brand: '',
          intprice: '',
          outprice: '',
          weight: '',
          weightL:'',
          des:''
        },
        updatetk:false,
      type:[],
      tname:'',
      picshow:'',
      currentPage4: 1,	//当前所在的页
      searchone:[],		//存取搜索数据
      total:0,			//总数
      pagesize:10,		//每页数量
      restaurants: [],
      a:[],
      allpname:[],
      pval:[],//评论信息
      pvalL:false,
      value:0
    },
    mounted() {
      this.getAllGoods();
      this.getType();
      this.allpnameL();
    },
    methods: {
      //获取商品信息
      getAllGoods() {
    	  //获取信息
    	 this.bygoods(1);
      },
      //获取类别
      getType(){
    	  axios.get("../../typeController/gettype").then(resp=>{
          	this.type = resp.data;
          	this.restaurants = this.type;
          });
      },
      //提示
      querySearch1(queryString, cb) {
          var allpname = this.allpname;
          var results = queryString ? allpname.filter(this.createFilter(queryString)) : allpname;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
      //返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据
      querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
      //打开弹窗
      open(){
        this.dialogFormVisible = true;
        this.picshow = '';
        this.tname = '';
        this.adddata.weightL = 'g';//单位
      },
      //添加商品弹框取消按钮
      offone(){
    	  this.dialogFormVisible = false;
    	  this.adddata = {
    	        pname: '',
    	        pic: '',
    	        inventory: '',
    	        brand: '',
    	        intprice: '',
    	        outprice: '',
    	        weight: '',
    	        weightL:'g',//单位
    	        des:''
    	      }
			this.tname = '';
      },
    //修改商品弹框取消按钮
      offtwo(){
    	  this.updatetk = false;
      },

      //添加商品
      add(){
        let config = {
						headers: {
							'Content-Type' : 'multipart/form-data'
						}
				};
        let formData = new FormData();
				formData.append("pname", this.adddata.pname);
				formData.append("intprice", this.adddata.intprice);
				formData.append("outprice", this.adddata.outprice);
				formData.append("inventory", this.adddata.inventory);
				formData.append("brand", this.adddata.brand);
				formData.append("type", this.tname);
				formData.append("weight", this.adddata.weight+this.adddata.weightL);
				formData.append("des", this.adddata.des);
				formData.append("pic", this.adddata.pic);
				axios.post("../../productController/add", formData, config).then(resp => {
					if(resp.data > 0){
						alert("添加成功");
						//清空
						this.getAllGoods();
						this.adddata = {
				              pname: '',
				              pic: '',
				              inventory: '',
				              brand: '',
				              type: '',
				              intprice: '',
				              outprice: '',
				              weight: '',
				              des: ''
				            }
						this.dialogFormVisible = false;
						this.tname = '';
					      this.allpnameL();
					}
				}).catch(err => {
					alert("添加失败");
					//清空
			          this.adddata = {
			              pname: '',
			              pic: '',
			              inventory: '',
			              brand: '',
			              type: '',
			              intprice: '',
			              outprice: '',
			              weight: '',
			              des: ''
			            }
			          this.dialogFormVisible = false;
			          this.tname = '';
				});
      },
		//搜索商品
	    bygoods(val){
    	  	//存临时变量
    	  	this.currentPage4 = val;
    	  	this.searchone = this.product;
	    	axios.post("../../productController/bygoods", qs.stringify({
	    		currentPage4: this.currentPage4,
	    		pagesize: this.pagesize,
	    		pid: this.searchone.pid,
	      	  	pname: this.searchone.pname,
	            tname: this.searchone.tname,
	            inventory: this.searchone.inventory,
	            brand: this.searchone.brand,
	            intprice: this.searchone.intprice,
	            outprice: this.searchone.outprice,
	            weight: this.searchone.weight,
	            des: this.searchone.des,
	            status: this.searchone.status
	    	})).then(resp=>{
	    		this.members = resp.data;
	    		if(resp.data.length > 0){
	    			this.total = Number(this.members[0].count);
	    		}else{
	    			this.total = 0;
	    		}
	    	});
	    },
	    //编辑
	    handleEdit(index, obj){
	    	this.update = JSON.parse(JSON.stringify(obj));
	    	this.updatetk = true;
	    	this.picshow ="../../../upload/" + this.update.pic;
	    	this.tname = this.update.tname;
	    },
	    //修改商品
	    updateproduct(){
	    let config = {
				headers: {
					'Content-Type' : 'multipart/form-data'
				}
		};
	    let formData = new FormData();
	    		formData.append("pid", this.update.pid);
				formData.append("pname", this.update.pname);
				formData.append("intprice", this.update.intprice);
				formData.append("outprice", this.update.outprice);
				formData.append("inventory", this.update.inventory);
				formData.append("brand", this.update.brand);
				formData.append("type", this.tname);
				formData.append("weight", this.update.weight+this.update.weightL);
				formData.append("des", this.update.des);
				formData.append("pic", this.update.pic);
				axios.post("../../productController/updateL", formData, config).then(resp => {
					if(resp.data > 0){
						alert("修改成功");
						this.bygoods(this.currentPage4);
						this.updatetk = false;
						this.allpnameL();
					}
				}).catch(err => {
					alert("修改失败");
			          this.updatetk = false;
				});
	    },
	  	//文章路径
		getFile(event){
			this.adddata.pic = event.target.files[0];
			let URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            this.picshow = URL.createObjectURL(event.target.files[0]);
		},
		File(event){
			this.update.pic = event.target.files[0];
			let URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            this.picshow = URL.createObjectURL(event.target.files[0]);
		},
		//上架，下架商品
		banL(index, obj){
			axios.post("../../productController/banL", qs.stringify({
				pid:obj.pid,
				status:obj.status
			})).then(resp=>{
				if(resp.data > 0){
					this.bygoods(this.currentPage4);
					alert("操作成功");
				}else{
					alert("操作失败");
				}
			});
		},
		//每页展示数据条数的调整
		handleSizeChange(val) {
			//变化每页值的数量
			this.pagesize = val;
			this.bygoods(1);
	      },
	      //控制页面的跳转
	    handleCurrentChange(val) {
	    	  this.bygoods(val);
	      },
	      //查询所有的商品名称
	      allpnameL(){
	    	  axios.get("../../productController/allpnameL").then(resp=>{
	    		  this.a = resp.data;
	    		  this.allpname = this.a;
	    	  });
	      },
	    //查看商品评论
      look(index, obj){
   	  axios.get("../../pvalController/getPval",{
             params:{
               pid:obj.pid
             }
           }).then(resp=>{
               this.pval = resp.data;
               this.getstarL(obj.pid);
               this.pvalL = true;
           });
        },
        getstarL(pid){
        	axios.get("../../pvalController/getstarL", {
        		params:{
        			pid:pid
        		}
        	}).then(resp=>{
        		this.value = Number(resp.data);
        	});
        }
    }
  });
</script>

</body>
</html>